<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新品开拍</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">新品开拍</span>
        <span class="public-header-right">新建</span>
    </div>

    <!--正文-->
    <div class="New-shoots bc-gray">
        <div class="hd  clearfix">
            <div style="width: 9.75rem;justify-content: space-between;" class="flex">
                <a href="javascript:;" :class="{active:$index==0}" v-for="item in list" @click='load(this)'>{{ item.secondTypeDiscibe }}</a>
            </div>
        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <div v-for='items in store'>
                    <img :src="items.storeImage" style="width: 100%;height: 43vw;">
                    <ul class="clearfix">
                        <li v-for='item in items.produce'>
                            <img :src="item.produceHeadImage" alt="">
                            <h6>{{item.produceTitle}}</h6>
                            <p><span>首发价</span><em>￥ <font @click='console(item)'>{{item.auctionSet.startingPrice}}</font>起</em></p>
                        </li>

                    </ul>
                </div>

            </div>


        </div>




    </div>


    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        $(function () {


        })
    </script>

    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
                    id: ''

                },
                ready: function () {
                    var vm = this;

                    vm.$http.get(base_url+'ZITAOHUI/latesAuction', {
                        params: {
                            // secondeTypeId:1
                        }
                    }).then(
                        function (response) {
                            let all_data = response.data.extend;
                            console.log(response)
                            let list = all_data.list;
                            let id = list[0].secondTypeId;
                            vm.$set('id', id)
                            vm.$set('list', list);
                            console.log(vm.id)

                        },
                        function (response) {
                            console.log(response)
                        }
                    )
                    setTimeout(function () {
                        vm.preLoad();
                        $('.hd a').click(function () {
                            var index = $(this).index();
                            $(this).addClass('active').siblings().removeClass(
                                'active');
                            $('.bd-0').eq(index).addClass('active').siblings().removeClass(
                                'active');
                        })
                    }, 100);


                },
                methods: {
                    console: function (t) {
                        console.log(t)
                    },
                    load: function (t) {
                        console.log(t)
                        this.$http.get(base_url+'ZITAOHUI/latesAuction', {
                            params: {
                                secondeTypeId: t.item.secondTypeId
                                // secondeTypeId: 3
                            }
                        }).then(
                            function (response) {
                                console.log(response);
                                let all_data = response.data.extend;
                                let store = all_data.list;
                                this.$set('store', store)
                                console.log(this.store)
                            },
                            function (response) {
                                console.log(response)
                            }
                        )
                    },
                    preLoad: function () {
                        this.$http.get(base_url+'ZITAOHUI/latesAuction', {
                            params: {
                                secondeTypeId: this.id
                                // secondeTypeId: 3
                            }
                        }).then(
                            function (response) {
                                console.log(response);
                                let all_data = response.data.extend;
                                let store = all_data.list;
                                this.$set('store', store);
                                console.log(store)


                            },
                            function (response) {
                                console.log(response)
                            }
                        )
                    }
                }

            })
        })
    </script>
</body>

</html>